<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ESP Web 相册</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      background: #f4f6f8;
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
    }

    #list {
      background: #ffffff;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      max-width: 600px;
      width: 100%;
      padding: 20px 30px;
    }

    #list h2 {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
      font-size: 24px;
    }

    .file-item {
      cursor: pointer;
      margin: 8px 0;
      color: #007BFF;
      text-decoration: none;
      font-size: 18px;
      padding: 6px 10px;
      border-radius: 6px;
      transition: background 0.2s;
    }

    .file-item:hover {
      background-color: #e9f3ff;
    }

    #viewer {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.85);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    #viewer img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }

    #closeBtn {
      position: absolute;
      top: 30px;
      right: 30px;
      font-size: 32px;
      color: white;
      cursor: pointer;
      transition: color 0.2s;
    }

    #closeBtn:hover {
      color: #ff6b6b;
    }
  </style>
</head>
<body>
  <div id="list">
    <h2>相册</h2>
    <div id="files">加载中...</div>
  </div>

  <div id="viewer">
    <div id="closeBtn">✖</div>
    <img id="pic" src="" alt=""/>
  </div>

  <script>
    async function fetchFileList() {
      const resp = await fetch('/list');
      const data = await resp.json();
      const div = document.getElementById('files');
      if (data.length === 0) {
        div.textContent = '没有找到图片';
        return;
      }
      div.textContent = '';
      data.forEach(fn => {
        const p = document.createElement('div');
        p.textContent = fn;
        p.className = 'file-item';
        p.onclick = () => showImage(fn);
        div.appendChild(p);
      });
    }

    function showImage(filename) {
      document.getElementById('pic').src = `/img?name=${encodeURIComponent(filename)}`;
      document.getElementById('viewer').style.display = 'flex';
    }

    document.getElementById('closeBtn').onclick = () => {
      document.getElementById('viewer').style.display = 'none';
    };

    window.onload = fetchFileList;
  </script>
</body>
</html>
